<template>
	<div class="h-full w-1/2 pt-2 pr-2">
		<div class="bg-white h-full w-full">
			<div class="bg-white h-full w-full flex flex-col">
				<div class="pl-4 pt-4">项目情况</div>
				<t-divider></t-divider>
				<div class="pl-4 pr-4 pb-4 flex-grow">
					<ul class="h-full w-full flex justify-between items-center pl-16 pr-16">
						<li class="w-1/5 h-1/5 text-center">
							<div class="text-4xl mb-4 text-blue-700">{{underway_project}}</div>
							<div class="text-gray-400">进行中</div>
						</li>
						<li class="w-1/5 h-1/5 text-center">
							<div class="text-4xl mb-4 text-gray-900">{{end_project}}</div>
							<div class="text-gray-400">已完结</div>
						</li>
						<li class="w-1/5 h-1/5 text-center">
							<div class="text-4xl mb-4 text-gray-900">{{await_project}}</div>
							<div class="text-gray-400">待开始</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ProjectData',
		data(){
			return {
				await_project: 0,
				end_project: 0,
				underway_project: 0
			}
		},
		methods: {
			// 封装请求接口的方法
			getProjectData(){
				this.$store.dispatch('dashboard/getProjectData').then((res) => {
					this.await_project = res.data.await_project
					this.end_project = res.data.end_project
					this.underway_project = res.data.underway_project
				})
			}
		},
		mounted() {
			this.getProjectData()
		}
	}
</script>

<style>
</style>